<template>
  <el-container class="detail-layout">
    <el-container>
      <el-aside width="200px" class="side-menu">
        <el-menu
          default-active="2"
          class="vertical-menu"
          background-color="rgba(255, 255, 255, 0.7)"
          text-color="#333"
          active-text-color="#409EFF"
          router
        >
          <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>文章管理</span>
          </template>
            <el-menu-item index="/detail/view">查看文章</el-menu-item>
            <el-menu-item index="/detail/category">查看分类</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </template>
            <el-menu-item index="/detail/profile">个人信息</el-menu-item>
            <el-menu-item index="/detail/change-password">修改密码</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>代码管理</span>
          </template>
            <el-menu-item index="/detail/problem">题目</el-menu-item>
            <el-menu-item index="/detail/solution">题解</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon><location /></el-icon>
            <span>数据统计</span>
          </template>
            <el-menu-item index="/detail/statistics/article">文章统计</el-menu-item>
            <el-menu-item index="/detail/statistics/problem">解题统计</el-menu-item>
        </el-sub-menu>
        </el-menu>
      </el-aside>
      
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';

const isDarkMode = ref(false);

const toggleDarkMode = () => {
  document.body.classList.toggle('dark-mode', isDarkMode.value);
};
</script>

<style lang="scss" scoped>
.detail-layout {
  min-height: 100vh;
  background-color: #f5f5f5;
  transition: background-color 0.3s;
  
  .nav-header {
    padding: 0;
    height: auto;
    
    .nav-menu {
      border-radius: 12px;
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      margin: 20px auto;
      max-width: 1200px;

    .el-menu-item {
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      transform-origin: center;
      &:hover {
        transform: scale(1.05) translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      &.is-active {
        animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1);
        transform: scale(1.08);
        box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
      }
      @keyframes pulse {
        0%, 100% { transform: scale(1.08); }
        50% { transform: scale(1.12); }
      }
    }

    .nav-left {
      display: flex;
      align-items: center;
      padding: 0 10px;
      .logo {
        font-weight: bold;
        font-size: 1.2rem;
      }
    }
    
    .nav-center {
      display: flex;
      align-items: center;
    }
    
    .nav-right {
      display: flex;
      align-items: center;
      gap: 15px;
      .github-icon {
        display: flex;
        align-items: center;
        color: inherit;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .side-menu {
  background-color: transparent;
  padding: 20px 0;
  
  .vertical-menu {
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 100%;
  }
}

.main-content {
  padding: 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin: 0 20px 20px 0;
}
}

.dark-mode {
  background-color: #1a1a1a;
  color: #f0f0f0;

  .detail-layout {
    background-color: #121212;
    
    .main-content {
      background-color: #1e1e1e;
      color: #f0f0f0;
    }
    
    .vertical-menu {
      background-color: rgba(30, 30, 30, 0.7) !important;
      color: #f0f0f0;
    }
  }
 }
}
</style>